HTMLify
script.js
Views: 8 | Author: cody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | var lockIcon = document.querySelector(".fa-lock"); var inner = document.querySelector(".inner"); var password = document.querySelector("#myPass"); var state = false; let text,validIcons,invalidIcons; function toggle(){ myFunction(); if(state){ function displayPass(){ document.getElementById("myPass"). setAttribute("type","password"); } setTimeout(displayPass,80); lockIcon.classList.remove("color-change"); inner.classList.remove("inner-hover"); state = false; } else{ function displayText(){ document.getElementById("myPass"). setAttribute("type","text"); } setTimeout(displayText,80); lockIcon.classList.add("color-change"); inner.classList.add("inner-hover"); state = true; } } function myFunction(){ var eye = document.querySelector(".eye-close"); imgsrc = document.getElementById("img1").src; if(imgsrc.indexOf("eye-close")!= -1){ eye.classList.add('eye-open'); document.getElementById("img1").src="https://i.postimg.cc/3JHFrZ3v/eye-open.png"; }else{ eye.classList.remove('eye-open'); document.getElementById("img1").src = "https://i.postimg.cc/HWMtCN1m/eye-close.png"; } } function valid(item , validIcon , invalidIcon){ text = document.querySelector(`#${item}`); text.style.opacity = "1"; validIcons = document.querySelector(`#${item} .${validIcon}`); validIcons.style.opacity='1'; invalidIcons = document.querySelector(`#${item} .${invalidIcon}`); invalidIcons.style.opacity="0"; } function invalid(item , validIcon , invalidIcon){ text = document.querySelector(`#${item}`); text.style.opacity = "0.5"; validIcons = document.querySelector(`#${item} .${validIcon}`); validIcons.style.opacity='0'; invalidIcons = document.querySelector(`#${item} .${invalidIcon}`); invalidIcons.style.opacity="1"; } function textChange(){ if(password.value.match(/[A-Z]/) != null) valid('capital' , 'fa-check' , 'fa-times'); else invalid('capital' , 'fa-check' , 'fa-times'); if(password.value.match(/[0-9]/) != null) valid('number' , 'fa-check' , 'fa-times'); else invalid('number' , 'fa-check' , 'fa-times'); if(password.value.match(/[!@#$%^&*]/) != null) valid('special-char' , 'fa-check' , 'fa-times'); else invalid('special-char' , 'fa-check' , 'fa-times'); if(password.value.length >= 8) valid('more-than-8' , 'fa-check' , 'fa-times'); else invalid('more-than-8' , 'fa-check' , 'fa-times'); } |